<template>
    <tiny-layout class="tiny-layout-tag1">
        <tiny-row :flex="true" :gutter="10">
            <tiny-col :span="6" :no="3">
                <tiny-collapse class="demo-collapse-wrap" v-model="data.activeTab">
                    <tiny-collapse-item title="服务信息" name="1">
                        <tiny-row :flex="true">
                            <tiny-col :span="3" :no="1">版本 </tiny-col>
                            <tiny-col :span="3" :no="1">{{ data.data.redis_version }}</tiny-col>
                            <tiny-col :span="3" :no="1">使用系统 </tiny-col>
                            <tiny-col :span="3" :no="1">{{ data.data.os }} | {{ data.data.arch_bits }}</tiny-col>
                        </tiny-row>
                        <tiny-divider></tiny-divider>
                        <tiny-row :flex="true">
                            <tiny-col :span="3" :no="1"> 使用模式</tiny-col>
                            <tiny-col :span="3" :no="1" v-if="data.data.redis_mode == 'standalone'"> 单机</tiny-col>
                            <tiny-col :span="3" :no="1" v-else> 集群</tiny-col>
                            <tiny-col :span="3" :no="1"> 启动天数</tiny-col>
                            <tiny-col :span="3" :no="1">{{ data.data.uptime_in_days }} 天 </tiny-col>
                        </tiny-row>
           
 
                        <tiny-divider></tiny-divider>
                        <tiny-row :flex="true">
                            <tiny-col :span="3" :no="1"> 最大连接数 </tiny-col>
                            <tiny-col :span="3" :no="1">{{ data.data.maxclients }} </tiny-col>
                            <tiny-col :span="3" :no="1"> 当前连接数 </tiny-col>
                            <tiny-col :span="3" :no="1">{{ data.data.connected_clients }} </tiny-col>
                        </tiny-row>

                    </tiny-collapse-item>
                </tiny-collapse>
            </tiny-col>
            <tiny-col :span="6" :no="3">
                <tiny-collapse class="demo-collapse-wrap" v-model="data.activeTab">
                    <tiny-collapse-item title="存储信息" name="2">
                        <tiny-row :flex="true">
                            <tiny-col :span="3" :no="1">系统内存</tiny-col>
                            <tiny-col :span="3" :no="1">{{ data.data.total_system_memory_human }}</tiny-col>
                            <tiny-col :span="3" :no="1">使用内存</tiny-col>
                            <tiny-col :span="3" :no="1">{{ data.data.used_memory_human }}</tiny-col>
                        </tiny-row>
                        <tiny-divider></tiny-divider>
                        <tiny-row :flex="true">
                            <tiny-col :span="3" :no="1">配置最大内存 </tiny-col>
                            <tiny-col :span="3" :no="1">{{ data.data.maxmemory_human }}</tiny-col>
                            <tiny-col :span="3" :no="1">活动内存 </tiny-col>
                            <tiny-col :span="3" :no="1">{{ data.data.active_defrag_running }}</tiny-col>
                        </tiny-row>
                        <tiny-divider></tiny-divider>
                        <tiny-row :flex="true">
                            <tiny-col :span="3" :no="1">最后存储时间 </tiny-col>
                            <tiny-col :span="3" :no="1">{{ data.data.rdb_last_save_time }}</tiny-col>
                            <tiny-col :span="3" :no="1">存储状态 </tiny-col>
                            <tiny-col :span="3" :no="1">{{ data.data.rdb_last_bgsave_status }}</tiny-col>
                        </tiny-row>

                    </tiny-collapse-item>
                </tiny-collapse>
            </tiny-col>

        </tiny-row>
    </tiny-layout>
</template>

<script setup>

import { reactive, onBeforeMount, onMounted, getCurrentInstance } from 'vue';
import { TinyCollapse, TinyCollapseItem } from '@opentiny/vue'
import HuiCharts from '@opentiny/huicharts';
let { proxy } = getCurrentInstance();
const data = reactive({
    data: {
        
    },
    activeTab: ['1', '2'],

})
onMounted(() => {
    loadData()
    // loadEcharts()
})

const loadData = () => {
    proxy.$api.system.queryRedisInfo().then(res => {
        data.data = res;
        data.data.rdb_last_save_time = new Date(res.rdb_last_save_time * 1000).toLocaleString();
    })
}
const loadEcharts = () => {
// 创建图表实例
let chartIns = new HuiCharts();

// 初始化图表容器
let chartContainerDom = document.getElementById('main');
chartIns.init(chartContainerDom);
const option = {
    theme: 'hdesign-light',
    padding: [50, 30, 50, 20],
    data: [
        { 'Month': '总内存', 'Domestic': 33 },
        { 'Month': '使用内存', 'Domestic': 27 },
        { 'Month': 'Mar', 'Domestic': 31 },
        { 'Month': 'Apr', 'Domestic': 30 },
        { 'Month': 'May', 'Domestic': 37 },
        { 'Month': 'Jun', 'Domestic': 36 },
        { 'Month': 'Jul', 'Domestic': 42 },

    ],
    xAxis: {
        data: 'Month',
    },
    yAxis: {
        name: 'MB'
    }
};
let chartType = 'BarChart';
chartIns.setSimpleOption(chartType, option);

// 开始渲染
chartIns.render();
}



</script>

<style lang="scss" scoped>
.tiny-divider--horizontal {
    margin: 10px 0 !important;
}
</style>